<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>汉字识字教学系统</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/animations.css">
    <link rel="stylesheet" href="css/styles.css">
    <link rel="stylesheet" href="css/modules/characters.css">
    <link rel="stylesheet" href="css/modules/dictionary.css">
    <link rel="stylesheet" href="css/modules/writing.css">
    <link rel="stylesheet" href="css/modules/review.css">
</head>
<body>
    <div id="app">
        <!-- 主要布局容器 -->
        <div class="app-layout">
            <!-- 课表切换按钮 -->
            <button class="sidebar-toggle" id="sidebar-toggle">
                <span class="toggle-icon">📚</span>
            </button>

            <!-- 左侧课表区域 -->
            <aside class="course-sidebar" id="course-sidebar">
                <div class="course-header">
                    <h2>课表</h2>
                </div>
                <div class="course-list">
                    <!-- 课程列表将通过JavaScript动态生成 -->
                </div>
            </aside>

            <!-- 右侧主要内容区域 -->
            <div class="main-area">
                <!-- 课程标题栏 -->
                <div class="lesson-header">
                    <div class="lesson-info">
                        <span id="current-lesson-title">第1课：认识木字</span>
                    </div>
                </div>

                <!-- 功能导航栏 -->
                <nav class="function-nav">
                    <div class="nav-item active" data-module="character">字根学习</div>
                    <div class="nav-item" data-module="radical">偏旁笔画</div>
                    <div class="nav-item" data-module="stroke">书写讲解</div>
            <div class="nav-item" data-module="drag">拖拽组合</div>
                    <div class="nav-item" data-module="exercise">游戏巩固</div>
        </nav>

                <!-- 主要学习内容区域 -->
                <main class="learning-content">
                    <!-- 字根学习模块 -->
                    <div id="character-module" class="module active">
                        <!-- 直播取景区域 -->
                        <div class="broadcast-area" id="broadcast-area">
                            <div class="broadcast-content" id="broadcast-content">
                                <!-- 默认显示汉字 -->
                                <div class="broadcast-character active" data-type="character">
                                    <div class="character-large-broadcast" id="main-character-broadcast">木</div>
                                    <div class="character-info-broadcast">
                                        <span class="pinyin-broadcast" id="character-pinyin-broadcast">mù</span>
                                        <span class="strokes-broadcast" id="character-strokes-broadcast">4笔画</span>
                                        <span class="radical-broadcast" id="character-radical-broadcast">木部</span>
                                    </div>
                                </div>
                                
                                <!-- 象形图片展示 -->
                                <div class="broadcast-image" data-type="image">
                                    <div class="quadrant-header-broadcast">象形图片</div>
                                    <div class="character-image-broadcast" id="character-image-broadcast">
                                        <div style="width: 300px; height: 300px; background: linear-gradient(135deg, #f0f0f0, #e0e0e0); border-radius: 20px; display: flex; align-items: center; justify-content: center; color: #666; font-size: 120px; font-weight: bold; margin-bottom: 30px;">木</div>
                                        <div class="character-origin-broadcast">像一棵树的形状，上面是树枝，下面是树根，中间是树干。</div>
                                    </div>
                                </div>
                                
                                <!-- 释义信息展示 -->
                                <div class="broadcast-meaning" data-type="meaning">
                                    <div class="quadrant-header-broadcast">释义</div>
                                    <div class="character-meaning-broadcast" id="character-meaning-broadcast">
                                        <div class="meaning-section-broadcast">
                                            <div class="meaning-title-broadcast">基本含义</div>
                                            <div class="meaning-text-broadcast">树木；木材；木制的</div>
                                        </div>
                                        <div class="meaning-section-broadcast">
                                            <div class="meaning-title-broadcast">常用词组</div>
                                            <div class="word-list-broadcast">
                                                <span class="word-item-broadcast">树木</span>
                                                <span class="word-item-broadcast">木材</span>
                                                <span class="word-item-broadcast">木头</span>
                                                <span class="word-item-broadcast">木屋</span>
                                            </div>
                                        </div>
                                        <div class="meaning-section-broadcast">
                                            <div class="meaning-title-broadcast">例句</div>
                                            <div class="sentence-example-broadcast">这棵大树的木材很结实。</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- 底部模块选择区 -->
                        <div class="module-selector" id="module-selector">
                            <div class="selector-card active" data-type="character" id="selector-character">
                                <div class="selector-icon">木</div>
                                <div class="selector-title">汉字展示</div>
                            </div>
                            <div class="selector-card" data-type="image" id="selector-image">
                                <div class="selector-icon">🌳</div>
                                <div class="selector-title">象形图片</div>
                            </div>
                            <div class="selector-card" data-type="meaning" id="selector-meaning">
                                <div class="selector-icon">📝</div>
                                <div class="selector-title">释义解析</div>
                            </div>
                            <div class="selector-card" data-type="practice" id="selector-practice">
                                <div class="selector-icon">✏️</div>
                                <div class="selector-title">练习题目</div>
                            </div>
                        </div>
                    </div>

                    <!-- 偏旁笔画模块 -->
                    <div id="radical-module" class="module">
                        <!-- 直播取景区域 -->
                        <div class="broadcast-area radical-broadcast-area" id="radical-broadcast-area">
                            <div class="broadcast-content" id="radical-broadcast-content">
                                <!-- 部首字符展示 -->
                                <div class="broadcast-radical active" data-type="radical">
                                    <div class="radical-large-broadcast">辶</div>
                                    <div class="radical-info-broadcast">
                                        <span class="pinyin-broadcast radical-pinyin">chuò</span>
                                        <span class="strokes-broadcast radical-strokes">3画</span>
                                        <span class="meaning-broadcast radical-meaning">走之旁</span>
                                    </div>
                                </div>
                                
                                <!-- 部首释义展示 -->
                                <div class="broadcast-radical-meaning" data-type="meaning">
                                    <div class="radical-indicator">辶</div>
                                    <div class="quadrant-header-broadcast">释义解析</div>
                                    <div class="radical-meaning-broadcast">
                                        <div class="meaning-section-broadcast">
                                            <div class="meaning-title-broadcast">基本含义</div>
                                            <div class="meaning-text-broadcast">与走、跑、移动有关，表示走走停停的动作。</div>
                                        </div>
                                        <div class="meaning-section-broadcast">
                                            <div class="meaning-title-broadcast">常见字例</div>
                                            <div class="word-list-broadcast">
                                                <span class="word-item-broadcast">远</span>
                                                <span class="word-item-broadcast">近</span>
                                                <span class="word-item-broadcast">运</span>
                                                <span class="word-item-broadcast">追</span>
                                                <span class="word-item-broadcast">迟</span>
                                            </div>
                                        </div>
                                        <div class="sentence-example-broadcast">
                                            例如："远"字中的"辶"表示距离很远的地方，需要走很久才能到达。
                                        </div>
                                    </div>
                                </div>
                                
                                <!-- 形象起源展示 -->
                                <div class="broadcast-radical-origin" data-type="origin">
                                    <div class="radical-indicator">辶</div>
                                    <div class="quadrant-header-broadcast">形象起源</div>
                                    <div class="radical-origin-broadcast">
                                        <div class="radical-image-broadcast">
                                            <div style="font-size: 150px; width: 300px; height: 300px; background: linear-gradient(135deg, #f0f0f0, #e0e0e0); border-radius: 20px; display: flex; align-items: center; justify-content: center; color: #666; font-weight: bold; margin-bottom: 30px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);">辶</div>
                                        </div>
                                        <div class="character-origin-broadcast">
                                            "辶"字形象地描绘了人在路上行走的样子，一个脚印接着一个脚印，时而快步，时而慢行，体现了走路时走走停停的特点。古人用这个符号来表示与移动、行走相关的概念。
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 部首选择器 -->
                        <div class="module-selector radical-selector" id="radical-selector">
                            <div class="selector-card radical-card active" data-radical="辶" data-pinyin="chuò" data-strokes="3" data-meaning="走之旁" data-type="radical">
                                <div class="selector-icon">辶</div>
                                <div class="selector-title">辶</div>
                            </div>
                            <div class="selector-card radical-card" data-radical="纟" data-pinyin="sī" data-strokes="3" data-meaning="绞丝旁" data-type="radical">
                                <div class="selector-icon">纟</div>
                                <div class="selector-title">纟</div>
                            </div>
                            <div class="selector-card radical-card" data-radical="艹" data-pinyin="cǎo" data-strokes="3" data-meaning="草字头" data-type="radical">
                                <div class="selector-icon">艹</div>
                                <div class="selector-title">艹</div>
                            </div>
                            <div class="selector-card radical-card" data-radical="口" data-pinyin="kǒu" data-strokes="3" data-meaning="口字旁" data-type="radical">
                                <div class="selector-icon">口</div>
                                <div class="selector-title">口</div>
                            </div>
                            <div class="selector-card radical-card" data-radical="宀" data-pinyin="mián" data-strokes="3" data-meaning="宝盖头" data-type="radical">
                                <div class="selector-icon">宀</div>
                                <div class="selector-title">宀</div>
                            </div>
                            <div class="selector-card radical-card" data-radical="皿" data-pinyin="mǐn" data-strokes="5" data-meaning="皿字底" data-type="radical">
                                <div class="selector-icon">皿</div>
                                <div class="selector-title">皿</div>
                            </div>
                            <div class="selector-card radical-card" data-radical="竹" data-pinyin="zhú" data-strokes="6" data-meaning="竹字头" data-type="radical">
                                <div class="selector-icon">竹</div>
                                <div class="selector-title">竹</div>
                            </div>
                            <div class="selector-card" data-type="meaning">
                                <div class="selector-icon">📝</div>
                                <div class="selector-title">释义</div>
                            </div>
                            <div class="selector-card" data-type="origin">
                                <div class="selector-icon">🌟</div>
                                <div class="selector-title">起源</div>
                            </div>
                        </div>
                    </div>

                    <!-- 书写讲解模块 -->
                    <div id="stroke-module" class="module">
                        <!-- 直播取景区域 -->
                        <div class="broadcast-area stroke-broadcast-area" id="stroke-broadcast-area">
                            <div class="broadcast-content" id="stroke-broadcast-content">
                                <!-- 按水平三栏布局重新设计 -->
                                <div class="stroke-layout">
                                    <!-- 左栏：笔顺动画 -->
                                    <div id="stroke-animation-container" class="stroke-animation-container">
                                        <!-- 动画内容将由 StrokeAnimationModule 动态生成 -->
                                    </div>
                                    
                                    <!-- 中栏：书写板 -->
                                    <div class="stroke-writing-box">
                                        <div class="writing-title">书写练习</div>
                                        <div class="writing-canvas-container">
                                            <div class="canvas-reference-char">木</div>
                                            <canvas id="stroke-canvas" width="300" height="300"></canvas>
                                            <div class="canvas-grid"></div>
                                        </div>
                                        <button class="clear-canvas-btn" id="clear-canvas-btn">清除重写</button>
                                    </div>

                                    <!-- 右栏：笔画信息 -->
                                    <div class="stroke-info-panel">
                                        <div class="info-instruction">跟随动画练习书写</div>
                                        
                                        <div class="char-info">
                                            <div class="char-pinyin">mù</div>
                                            <div class="char-strokes">笔画：4画</div>
                                        </div>
                                        
                                        <div class="stroke-tips">
                                            <h4>书写要点</h4>
                                            <ul class="tips-list">
                                                <li>竖画要直，从上到下</li>
                                                <li>横画要平，从左到右</li>
                                                <li>撇捺要对称，角度适中</li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 书写讲解选择器 -->
                        <div class="module-selector stroke-selector" id="stroke-selector">
                            <div class="selector-card stroke-card active" data-radical="辶" data-pinyin="chuò" data-meaning="走之旁">
                                <div class="selector-icon">辶</div>
                                <div class="selector-title">辶</div>
                            </div>
                            <div class="selector-card stroke-card" data-radical="人" data-pinyin="rén" data-meaning="人字旁">
                                <div class="selector-icon">人</div>
                                <div class="selector-title">人</div>
                            </div>
                            <div class="selector-card stroke-card" data-radical="纟" data-pinyin="sī" data-meaning="绞丝旁">
                                <div class="selector-icon">纟</div>
                                <div class="selector-title">纟</div>
                            </div>
                            <div class="selector-card stroke-card" data-radical="木" data-pinyin="mù" data-meaning="木字旁">
                                <div class="selector-icon">木</div>
                                <div class="selector-title">木</div>
                            </div>
                            <div class="selector-card stroke-card" data-radical="皿" data-pinyin="mǐn" data-meaning="皿字底">
                                <div class="selector-icon">皿</div>
                                <div class="selector-title">皿</div>
                            </div>
                            <div class="selector-card stroke-card" data-radical="竹" data-pinyin="zhú" data-meaning="竹字头">
                                <div class="selector-icon">竹</div>
                                <div class="selector-title">竹</div>
                            </div>
                            <div class="selector-card stroke-card" data-radical="雨" data-pinyin="yǔ" data-meaning="雨字头">
                                <div class="selector-icon">雨</div>
                                <div class="selector-title">雨</div>
                            </div>
                        </div>
                    </div>

            <!-- 拖拽组合模块 -->
                    <div id="drag-module" class="module">
                        <!-- 直播取景区域 -->
                        <div class="broadcast-area drag-broadcast-area" id="drag-broadcast-area">
                            <div class="broadcast-content" id="drag-broadcast-content">
                                <!-- 水平三栏布局 -->
                                <div class="drag-layout">
                                    <!-- 左栏：相关部首库 -->
                                    <div class="drag-source-section">
                                        <div class="source-title">相关部首</div>
                                        <div class="source-chars-grid">
                                            <div class="drag-char-item" draggable="true" data-char="亻" data-meaning="人字旁">亻</div>
                                            <div class="drag-char-item" draggable="true" data-char="氵" data-meaning="三点水">氵</div>
                                            <div class="drag-char-item" draggable="true" data-char="手" data-meaning="手字旁">手</div>
                                            <div class="drag-char-item" draggable="true" data-char="口" data-meaning="口字旁">口</div>
                                            <div class="drag-char-item" draggable="true" data-char="日" data-meaning="日字旁">日</div>
                                            <div class="drag-char-item" draggable="true" data-char="火" data-meaning="火字旁">火</div>
                                        </div>
                                    </div>
                                    
                                    <!-- 中栏：组合公式 -->
                                    <div class="drag-formula-section">
                                        <div class="formula-title">字符组合</div>
                                        <div class="combination-formula">
                                            <div class="formula-parts">
                                                <div class="combo-slot combo-slot-left" data-slot="1">
                                                    <span class="slot-placeholder">拖拽部首到这里</span>
                                                </div>
                                                <div class="combo-operator">+</div>
                                                <div class="combo-fixed-char">
                                                    <span class="fixed-char-display">木</span>
                                                    <span class="fixed-char-label">本节课字符</span>
                                                </div>
                                                <div class="combo-operator">=</div>
                                                <div class="combo-result" id="combo-result">
                                                    <span class="result-placeholder">?</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <!-- 右栏：组词例句区域 -->
                                    <div class="drag-words-section" id="drag-words-section">
                                        <div class="words-title">组词例句</div>
                                        
                                        <!-- 合成字信息区域 -->
                                        <div class="char-info-section" id="char-info-section">
                                            <div class="char-info-placeholder">完成组合后显示字符信息</div>
                                            <div class="char-info-content" id="char-info-content" style="display: none;">
                                                <div class="char-display" id="char-display">沐</div>
                                                <div class="char-details">
                                                    <div class="char-pinyin" id="char-pinyin">mù</div>
                                                    <div class="char-meaning" id="char-meaning">用水洗头发；润泽</div>
                                                </div>
                                            </div>
                                        </div>
                                        
                                        <div class="words-content">
                                            <div class="words-display" id="words-display">
                                                <div class="word-placeholder">请先完成字符组合</div>
                                            </div>
                                            <div class="sentence-display" id="sentence-display">
                                                <div class="sentence-placeholder">组合成功后显示例句</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 拖拽组合选择器 -->
                        <div class="module-selector drag-selector" id="drag-selector">
                            <div class="selector-card drag-card active" data-type="demo" data-title="演示模式">
                                <div class="selector-icon">🎯</div>
                                <div class="selector-title">演示</div>
                            </div>
                            <div class="selector-card drag-card" data-type="practice" data-title="练习模式">
                                <div class="selector-icon">🔄</div>
                                <div class="selector-title">练习</div>
                            </div>
                            <div class="selector-card drag-card" data-type="challenge" data-title="挑战模式">
                                <div class="selector-icon">⚡</div>
                                <div class="selector-title">挑战</div>
                            </div>
                            <div class="selector-card drag-card" data-type="reset" data-title="重置">
                                <div class="selector-icon">🔄</div>
                                <div class="selector-title">重置</div>
                            </div>
                        </div>
                    </div>

                    <!-- 游戏巩固模块 -->
                    <div id="exercise-module" class="module">
                        <!-- 直播取景区域 -->
                        <div class="broadcast-area exercise-broadcast-area" id="exercise-broadcast-area">
                            <div class="broadcast-content" id="exercise-broadcast-content">
                                
                                <!-- 成语缺字游戏 -->
                                <div class="game-content active" data-game="idiom-fill">
                                    <div class="game-header">
                                        <div class="game-title">成语缺字</div>
                                        <div class="game-score">分数: <span id="idiom-score">0</span></div>
                                    </div>
                                    <div class="game-main">
                                        <div class="idiom-display">
                                            <div class="idiom-text">
                                                <div class="char-slot filled">一</div>
                                                <div class="char-slot empty" data-answer="木"></div>
                                                <div class="char-slot filled">三</div>
                                                <div class="char-slot filled">分</div>
                                            </div>
                                            <div class="idiom-hint">形容书法笔力刚劲有力，也比喻对文字工作的深刻性</div>
                                        </div>
                                        <div class="answer-options">
                                            <button class="option-btn" data-option="火">火</button>
                                            <button class="option-btn" data-option="木">木</button>
                                            <button class="option-btn" data-option="水">水</button>
                                            <button class="option-btn" data-option="金">金</button>
                                        </div>
                                    </div>
                                </div>
                                
                                <!-- 汉字找茬游戏 -->
                                <div class="game-content" data-game="find-difference">
                                    <div class="game-header">
                                        <div class="game-title">汉字找茬</div>
                                        <div class="game-score">分数: <span id="diff-score">0</span></div>
                                    </div>
                                    <div class="game-main">
                                        <div class="find-diff-container">
                                            <div class="group-title">找出不同类的汉字</div>
                                            <div class="char-grid">
                                                <div class="diff-char" data-correct="false">木</div>
                                                <div class="diff-char" data-correct="false">林</div>
                                                <div class="diff-char" data-correct="false">森</div>
                                                <div class="diff-char" data-correct="false">本</div>
                                                <div class="diff-char" data-correct="true">体</div>
                                                <div class="diff-char" data-correct="false">休</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                
                                <!-- 知识问答游戏 -->
                                <div class="game-content" data-game="quiz">
                                    <div class="game-header">
                                        <div class="game-title">知识问答</div>
                                        <div class="game-score">分数: <span id="quiz-score">0</span></div>
                                    </div>
                                    <div class="game-main">
                                        <div class="question-container">
                                            <div class="question-text">"木"字有几画？</div>
                                            <div class="quiz-options">
                                                <div class="quiz-option" data-answer="false">3画</div>
                                                <div class="quiz-option" data-answer="true">4画</div>
                                                <div class="quiz-option" data-answer="false">5画</div>
                                                <div class="quiz-option" data-answer="false">6画</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                
                                <!-- 汉字拼图游戏 -->
                                <div class="game-content" data-game="puzzle">
                                    <div class="game-header">
                                        <div class="game-title">汉字拼图</div>
                                        <div class="game-score">分数: <span id="puzzle-score">0</span></div>
                                    </div>
                                    <div class="game-main">
                                        <div class="puzzle-container">
                                            <div class="target-char">
                                                <div class="target-title">目标汉字</div>
                                                <div class="target-display" id="target-char">森</div>
                                            </div>
                                            <div class="puzzle-area">
                                                <div class="drop-zone" data-position="1"></div>
                                                <div class="drop-zone" data-position="2"></div>
                                                <div class="drop-zone" data-position="3"></div>
                                            </div>
                                            <div class="puzzle-pieces">
                                                <div class="puzzle-piece" draggable="true" data-piece="木">木</div>
                                                <div class="puzzle-piece" draggable="true" data-piece="木">木</div>
                                                <div class="puzzle-piece" draggable="true" data-piece="木">木</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                
                                <!-- 汉字连线游戏 -->
                                <div class="game-content" data-game="matching">
                                    <div class="game-header">
                                        <div class="game-title">汉字连线</div>
                                        <div class="game-score">分数: <span id="match-score">0</span></div>
                                    </div>
                                    <div class="game-main">
                                        <div class="matching-container">
                                            <div class="match-column left-column">
                                                <div class="column-title">汉字</div>
                                                <div class="match-item" data-value="木" data-id="1">木</div>
                                                <div class="match-item" data-value="森" data-id="2">森</div>
                                                <div class="match-item" data-value="林" data-id="3">林</div>
                                                <div class="match-item" data-value="树" data-id="4">树</div>
                                            </div>
                                            <div class="match-column right-column">
                                                <div class="column-title">拼音</div>
                                                <div class="match-item" data-value="shù" data-match="4">shù</div>
                                                <div class="match-item" data-value="sēn" data-match="2">sēn</div>
                                                <div class="match-item" data-value="mù" data-match="1">mù</div>
                                                <div class="match-item" data-value="lín" data-match="3">lín</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                
                                <!-- 汉字记忆翻牌游戏 -->
                                <div class="game-content" data-game="memory">
                                    <div class="game-header">
                                        <div class="game-title">汉字记忆</div>
                                        <div class="game-score">分数: <span id="memory-score">0</span></div>
                                        <div class="game-moves">步数: <span id="memory-moves">0</span></div>
                                    </div>
                                    <div class="game-main">
                                        <div class="memory-grid">
                                            <div class="memory-card" data-card="木">
                                                <div class="card-front"></div>
                                                <div class="card-back">木</div>
                                            </div>
                                            <div class="memory-card" data-card="木">
                                                <div class="card-front"></div>
                                                <div class="card-back">木</div>
                                            </div>
                                            <div class="memory-card" data-card="森">
                                                <div class="card-front"></div>
                                                <div class="card-back">森</div>
                                            </div>
                                            <div class="memory-card" data-card="森">
                                                <div class="card-front"></div>
                                                <div class="card-back">森</div>
                                            </div>
                                            <div class="memory-card" data-card="林">
                                                <div class="card-front"></div>
                                                <div class="card-back">林</div>
                                            </div>
                                            <div class="memory-card" data-card="林">
                                                <div class="card-front"></div>
                                                <div class="card-back">林</div>
                                            </div>
                                            <div class="memory-card" data-card="树">
                                                <div class="card-front"></div>
                                                <div class="card-back">树</div>
                                            </div>
                                            <div class="memory-card" data-card="树">
                                                <div class="card-front"></div>
                                                <div class="card-back">树</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                
                                <!-- 汉字分类游戏 -->
                                <div class="game-content" data-game="category">
                                    <div class="game-header">
                                        <div class="game-title">汉字分类</div>
                                        <div class="game-score">分数: <span id="category-score">0</span></div>
                                    </div>
                                    <div class="game-main">
                                        <div class="category-container">
                                            <div class="category-instruction">将汉字拖拽到正确的分类中</div>
                                            <div class="category-boxes">
                                                <div class="category-box" data-category="wood">
                                                    <div class="category-title">木字旁</div>
                                                    <div class="category-drop-zone"></div>
                                                </div>
                                                <div class="category-box" data-category="water">
                                                    <div class="category-title">三点水</div>
                                                    <div class="category-drop-zone"></div>
                                                </div>
                                                <div class="category-box" data-category="fire">
                                                    <div class="category-title">火字旁</div>
                                                    <div class="category-drop-zone"></div>
                                                </div>
                                            </div>
                                            <div class="char-pool">
                                                <div class="pool-char" draggable="true" data-category="wood">树</div>
                                                <div class="pool-char" draggable="true" data-category="water">河</div>
                                                <div class="pool-char" draggable="true" data-category="fire">烧</div>
                                                <div class="pool-char" draggable="true" data-category="wood">林</div>
                                                <div class="pool-char" draggable="true" data-category="water">海</div>
                                                <div class="pool-char" draggable="true" data-category="fire">灯</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                
                            </div>
                        </div>
                        
                        <!-- 游戏选择器 -->
                        <div class="module-selector exercise-selector" id="exercise-selector">
                            <div class="selector-card game-card active" data-game="idiom-fill" data-title="成语缺字">
                                <div class="selector-icon">🧩</div>
                                <div class="selector-title">成语缺字</div>
                            </div>
                            <div class="selector-card game-card" data-game="find-difference" data-title="汉字找茬">
                                <div class="selector-icon">🔍</div>
                                <div class="selector-title">汉字找茬</div>
                            </div>
                            <div class="selector-card game-card" data-game="quiz" data-title="知识问答">
                                <div class="selector-icon">❓</div>
                                <div class="selector-title">知识问答</div>
                            </div>
                            <div class="selector-card game-card" data-game="puzzle" data-title="汉字拼图">
                                <div class="selector-icon">🧩</div>
                                <div class="selector-title">汉字拼图</div>
                            </div>
                            <div class="selector-card game-card" data-game="matching" data-title="汉字连线">
                                <div class="selector-icon">🔗</div>
                                <div class="selector-title">汉字连线</div>
                            </div>
                            <div class="selector-card game-card" data-game="memory" data-title="汉字记忆">
                                <div class="selector-icon">🃏</div>
                                <div class="selector-title">汉字记忆</div>
                            </div>
                            <div class="selector-card game-card" data-game="category" data-title="汉字分类">
                                <div class="selector-icon">📂</div>
                                <div class="selector-title">汉字分类</div>
                            </div>
                        </div>
                    </div>
                </main>
            </div>

            <!-- AI讲课稿面板 - 独立第三列 -->
            <aside class="lecture-script-panel" id="lecture-script-panel">
                <div class="script-header">
                    <h3>AI讲课稿</h3>
                    <div class="script-controls">
                        <button class="script-btn generate-btn" id="generate-script-btn">
                            <span class="btn-icon">🤖</span>
                            生成讲课稿
                        </button>
                        <button class="script-btn save-btn" id="save-script-btn">
                            <span class="btn-icon">💾</span>
                            保存
                        </button>
                        <button class="script-btn toggle-panel-btn" id="toggle-script-panel">
                            <span class="btn-icon">📝</span>
                        </button>
                    </div>
                    <div class="api-status disconnected">
                        <span class="status-indicator"></span>
                        未配置API
                    </div>
                </div>
                <div class="script-content">
                    <div class="script-status" id="script-status">
                        点击"生成讲课稿"按钮，AI将为当前汉字生成专业的教学讲解内容，生成后可手动编辑和格式化
                    </div>
                    
                    <!-- 富文本编辑工具栏 -->
                    <div class="editor-toolbar" id="editor-toolbar">
                        <div class="toolbar-group">
                            <button class="toolbar-btn" id="bold-btn" title="加粗">
                                <span><strong>B</strong></span>
                            </button>
                            <button class="toolbar-btn" id="italic-btn" title="斜体">
                                <span><em>I</em></span>
                            </button>
                            <button class="toolbar-btn" id="underline-btn" title="下划线">
                                <span><u>U</u></span>
                            </button>
                        </div>
                        
                        <div class="toolbar-group">
                            <button class="toolbar-btn" id="color-red" title="红色文字" data-color="#e74c3c">
                                <span style="color: #e74c3c;">🔴</span>
                            </button>
                            <button class="toolbar-btn" id="color-blue" title="蓝色文字" data-color="#3498db">
                                <span style="color: #3498db;">🔵</span>
                            </button>
                            <button class="toolbar-btn" id="color-green" title="绿色文字" data-color="#27ae60">
                                <span style="color: #27ae60;">🟢</span>
                            </button>
                            <button class="toolbar-btn" id="color-orange" title="橙色文字" data-color="#f39c12">
                                <span style="color: #f39c12;">🟠</span>
                            </button>
                        </div>
                        
                        <div class="toolbar-group">
                            <button class="toolbar-btn" id="highlight-yellow" title="黄色高亮" data-highlight="#fff3cd">
                                <span>🟡</span>
                            </button>
                            <button class="toolbar-btn" id="highlight-green" title="绿色高亮" data-highlight="#d1ecf1">
                                <span>🔰</span>
                            </button>
                        </div>
                        
                        <div class="toolbar-group">
                            <button class="toolbar-btn" id="ordered-list" title="有序列表">
                                <span>🔢</span>
                            </button>
                            <button class="toolbar-btn" id="unordered-list" title="无序列表">
                                <span>•••</span>
                            </button>
                        </div>
                        
                        <div class="toolbar-group">
                            <button class="toolbar-btn" id="clear-format" title="清除格式 (Ctrl+点击清空所有内容)">
                                <span>🧹</span>
                            </button>
                        </div>
                    </div>
                    
                    <!-- 可编辑的富文本内容区域 -->
                    <div class="script-editor" 
                         id="script-editor" 
                         contenteditable="true" 
                         data-placeholder="在这里输入或编辑讲课稿内容...&#10;&#10;你可以：&#10;• 手动输入内容&#10;• 让AI生成后再编辑&#10;• 使用工具栏进行格式化&#10;• 添加序号、颜色、高亮等"></div>
                    
                    <div class="script-metadata" id="script-metadata"></div>
                </div>
            </aside>
        </div>

        <!-- 教师控制面板 -->
        <aside class="teacher-panel">
            <button class="panel-toggle" id="panel-toggle">⚙️</button>
            <div class="panel-content" id="panel-content">
                <div class="panel-header">
                    <h4>教师控制面板</h4>
                    <button class="close-panel" id="close-panel">×</button>
                </div>
                <div class="panel-sections">
                    <div class="panel-section">
                        <h5>AI配置</h5>
                        <button class="panel-btn" id="ai-config-btn">配置通义千问API</button>
                    </div>
                    <div class="panel-section">
                        <h5>内容管理</h5>
                        <button class="panel-btn" id="import-data">导入数据</button>
                        <button class="panel-btn" id="export-data">导出数据</button>
                    </div>
                    <div class="panel-section">
                        <h5>图片上传</h5>
                        <input type="file" id="image-upload" accept="image/*" style="display: none;">
                        <button class="panel-btn" onclick="document.getElementById('image-upload').click()">上传图片</button>
                    </div>
                </div>
            </div>
        </aside>
    </div>

    <!-- 消息容器 -->
    <div id="message-container"></div>

    <!-- 脚本引用 -->
    <script src="js/config.js"></script>
    <script src="js/modules/api-service.js"></script>
    <script src="js/modules/utils.js"></script>
    <script src="js/modules/data.js"></script>
    <script src="js/modules/ai.js"></script>
    <script src="js/modules/events.js"></script>
    <script src="js/modules/character.js"></script>
    <script src="js/modules/radical.js"></script>
    <script src="js/modules/strokeAnimation.js"></script>
    <script src="js/modules/stroke.js"></script>
    <script src="js/modules/drag.js"></script>
    <script src="js/modules/exercise.js"></script>
    <script src="js/main.js"></script>
    <script>
      document.addEventListener('DOMContentLoaded', init);
    </script>
</body>
</html> 